<template>
  <div id="box"></div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
  props: [],
  data() {
    return {};
  },
  computed: {
    ...mapGetters({
      list: "fenlei/list",
    }),
  },
  mounted() {
    this.reqList();
  },
  methods: {
    ...mapActions({
      reqList: "fenlei/reqList",
    }),
  },
  watch: {
    list: {
      handler() {
        console.log(this.list);
        if (this.list.length > 0) {
          // 图表配置
          var options = {
            chart: {
              type: "line", 
            },
            title: {
              text: "商品分类", 
            },
            xAxis: {
              categories: this.list.map(item=>item.catename), 
            },
            yAxis: {
              title: {
                text: "下级分类数量", 
              },
            },
            //数据
            series: [
              {
                name: "数量", 
                data: this.list.map(item=>item.children?item.children.length:0), 
              },
            ],
          };
          var chart = require("highcharts").chart("box", options);
        }
      },
      deep: true,
    },
  },
};
</script>
<style scoped lang="less">
@import "../../less/index.less";
#box {
  width: 800px;
  height: 400px;
  border: 1px solid @primary;
}

</style>